<template>
  <div id="div1">
    <!-- head -->
    <el-card class="elc1">
      <el-row type="flex" class="el1">
        <el-col :span="24" align="top">
          <div class="grid-content bg-purple-dark">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>会员管理</el-breadcrumb-item>
              <el-breadcrumb-item>积分规则</el-breadcrumb-item>
            </el-breadcrumb>
            <h1>积分规则</h1>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- body -->
    <el-card class="elc2">
      <!-- 第一块 -->
      <el-row class="el1">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <span>基础规则</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第二块 -->
      <el-form :inline="true" v-model="du">
        <el-row type="flex" justify="center">
          <el-col :span="10" class="el2">
            <el-form-item label="最小抵扣单位">
              <el-input placeholder="请输入" v-model="du.input1">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 第三块 -->
      <el-form :inline="true" v-model="du">
        <el-row type="flex" justify="center">
          <el-col :span="10" class="el3">
            <el-form-item label="1积分=">
              <el-input placeholder="请输入" v-model="du.input2">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 第四块 -->
      <el-form :inline="true" >
        <el-row type="flex" justify="center">
          <el-col :span="10" class="el4">
            <el-form-item label="积分有效期">
              <el-radio v-model="radio" label="永久有效"></el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 第五块 -->
      <el-form :inline="true" v-model="validity">
        <el-row type="flex" justify="center">
          <el-col :span="10" class="el5">
            <el-form-item>
              <el-radio v-model="radio" label="自获得之日起"></el-radio>
              <el-select v-model="validity.value" placeholder="请选择">
                <el-option
                  v-for="item in  validity.options"
                  :key="item. value"
                  :label="item. label"
                  :value="item. value">
                </el-option>
              </el-select>
              <span>有效果</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
       <!-- 第六块 -->
      <el-form :inline="true"
      v-model="gainUp">
        <el-row type="flex" justify="center">
          <el-col :span="10" class="el6">
            <el-form-item label="积分数量">
              <el-checkbox v-model="checked"
              label="积分获取上限"></el-checkbox>
              <span></span>
               <el-input placeholder="请输入" v-model="gainUp.input3">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
       <!-- 第七块 -->
      <el-form :inline="true"
      v-model="gainDown">
        <el-row type="flex" justify="center">
          <el-col :span="10" class="el7">
            <el-form-item>
              <el-checkbox v-model="checked"
              label="积分获取下限"></el-checkbox>
              <span></span>
               <el-input placeholder="请输入" v-model="gainDown.input4">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- foot -->
    <el-card class="elc3">
      <!-- 第一块-->
      <el-row class="el1">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <span>抵扣规则</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第二块 -->
      <el-form :inline="true">
        <el-row type="flex" justify="center">
          <el-col :span="10" class="el2">
            <el-form-item label="积分有效期">
              <el-radio v-model="radio1" label="全部商品"></el-radio>
              <el-radio v-model="radio1" label="部分商品"></el-radio>
              <el-link :underline="false" type="primary">选择商品</el-link>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
       <!-- 第三块 -->
      <el-form :inline="true"
      v-model="dn">
        <el-row type="flex" justify="center">
          <el-col :span="10" class="el3">
            <el-form-item label="抵扣数量">
              <el-checkbox v-model="checked"
              label="使用上限"></el-checkbox>
              <span></span>
               <el-input placeholder="请输入" v-model="dn.input5">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
       <!-- 第四块 -->
      <el-form :inline="true"
      v-model="dn">
        <el-row type="flex" justify="center">
          <el-col :span="10" class="el4">
            <el-form-item>
              <el-checkbox v-model="checked"
              label="使用下限"></el-checkbox>
             <span></span>
               <el-input placeholder="请输入" v-model="dn.input6">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
       <!-- 按钮 -->
      <el-row type="flex" justify="center">
        <el-col :span="10" class="el4">
          <el-button type="primary"
          @click="add">提交</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      du:{
       input1: "", 
       input2: "",
      },
      validity:{ 
       value: "",
       options: [
        {
          value: "今天",
          label: "今天",
        },
        {
          value: "最近15天",
          label: "最近15天",
        },
        {
          value: "最近30天",
          label: "最近30天",
        },
        {
          value: "最近45天",
          label: "最近45天",
        },
        {
          value: "最近90天",
          label: "最近90天",
        },
      ],
      },
      dn:{
       input5: "",
       input6: "",
      },
      gainUp:{
       input3: "",
      },
      gainDown:{
       input4: "",
      },
      checked: [],
      radio:[], 
      radio1:[], 
    };
  },
 
  methods:{
    add(){
      this.$axios({
        url:'/vip/score/add',
        // method:'get',
        params:{
          minDeduction:[this.du.input1,this.du.input2].toString(),
          equivalence:[this.checked[0],this.dn.input5,this.checked[1],this.dn.input6].toString(),
          validity:[this.radio,this.validity.value,this.radio1,].toString(),
          maxScore:[this.checked[2],this.gainUp.input3].toString(),
          minScore:[this.checked[3],this.gainDown.input4].toString()
        }
      }).then((res)=>{
        console.log(res);
      })
      
    },
     
  },
 
};
</script>

<style scoped lang="less">
/deep/ .el-input-group__append {
  padding: 0 8px;
}
.el-input {
  width: 200px;
}
// head
.elc1 {
  height: 100px;
  margin-bottom: 20px;
  .el1 {
    .bg-purple-dark {
      background: #fff;
      width: 100%;
      height: 100px;
    }
    h1 {
      font-size: 20px;
      margin-top: 20px;
    }
  }
}
// body
.elc2 {
  margin-bottom: 20px;
span{
       margin:0 10px;
}
  //第一块

  //第二块

  //第三块
  .el3 {
    margin-left: 75px;
  }
  //第四块
  .el4 {
    .el-form-item {
      margin-left: 14px;
    }
  }
  //第五块
  .el5 {
    margin-left: 190px;
    .el-radio{
      margin-right: 10px;
    }
    .el-select {
      width: 200px;
      margin-right: 10px;
    }
  }
  //第六块
  .el6 {
        margin-left: 50px;
   }
  //第七块
  .el7 {
        margin-left: 185px;
   }
  }
// foot
.elc3 {
  span{
       margin:0 11px;
  }
  //第一块
  
  //第二块
  .el2 {
     margin-left: 25px;
  }
 //第三块
  .el3 {
        margin-left: 50px;
   }
  //第四块
  .el4 {
        margin-left: 185px;
   }
  //按钮
  .el-button{
    width: 80px;
    margin-top: 30px;
  }
}
</style>